<template>
  <div class="wrapper" :class="type">
    <ul>
        <li v-for="(item, index) in tabList"
          :key="index"
          :class="{action:is_tabList===index}"
          @click="is_tabList=index"
        >{{item}}</li>
    </ul>
    <div>
      <img v-show="is_tabList===0" :src="require('../../../assets/img/' + type + '/special1.png')">
      <img v-show="is_tabList===1" :src="require('../../../assets/img/' + type + '/special2.png')">
      <img v-show="is_tabList===2" :src="require('../../../assets/img/' + type + '/special3.png')">
      <img v-show="is_tabList===3" :src="require('../../../assets/img/' + type + '/special4.png')">
    </div>
  </div>
</template>

<script>
export default {
  name: 'CompanyTab',
  props: {
    type: String,
    tabList: Array
  },
  data () {
    return {
      is_tabList: 0
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.wrapper
  width 100%
  height 6.26rem /* 313/50 */
  border-radius 5px
  padding .52rem /* 26/50 */ .4rem .56rem /* 28/50 */ .4rem
  ul
    width 100%
    display flex
    margin-bottom .36rem /* 18/50 */
    li
      width 23%
      height .8rem /* 39/50 */
      line-height .72rem /* 39/50 */
      color #fff
      font-size .3rem /* 15/50 */
      text-align center
      margin-left .2rem /* 10/50 */
      border-radius .2rem /* 10/50 */
      position relative
      z-index 10
      top 0px
    li:nth-child(1)
      margin-left 0px
    .action
      font-weight bold
    .action:after
      bottom .04rem /* 3/50 */
    li:after
      width 100%
      height .72rem
      content ""
      position absolute
      bottom .08rem /* 3/50 */
      left 0
      right 0
      z-index -1
      border-radius .2rem
  img
    width 100%
    height 100%
.one
  ul
    li
      background #B9480A
      box-shadow 0px 2px 0px 0px rgba(180, 72, 13, 0.3)
    li:after
      background #D85710
    .action:after
      background #B9480A
      border 1px solid #FC772E
.two
  ul
    li
      background #B90A0A
      box-shadow 0px 2px 0px 0px rgba(183, 7, 13, 0.3)
    li:after
      background #D81010
    .action:after
      background #B90A0A
      border 1px solid #F24A4F
.there
  ul
    li
      background #0A5B94
      box-shadow 0px 2px 0px 0px rgba(7, 113, 187, 0.3)
    li:after
      background #0B7DCD
    .action:after
      background #0A5B94
      border 1px solid #3DA6EF
</style>
